<template>
    <view class="containers">

        <!-- <img src="https://oa.yuxiang123.cn/assets/task/background.png"   mode="widthFix" style="width: 100%;">

        <view class="">
            <view></view>

        </view> -->

        <view class="category_nav"   >
            <view class="category">
                <view @click="getUserTask(1)" :class="task_index==1?'category-item active':'category-item'">
                    待审核
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="task_index==1?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getUserTask(2)" :class="task_index==2?'category-item active':'category-item'">
                    待接单
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="task_index==2?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getUserTask(3)" :class="task_index==3?'category-item active':'category-item'">
                    已接单
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="task_index==3?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getUserTask(4)" :class="task_index==4?'category-item active':'category-item'">
                    已结算
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="task_index==4?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
                <view @click="getUserTask(5)" :class="task_index==5?'category-item active':'category-item'">
                    草稿箱
                    <view  style="margin-top: -12rpx;height: 40rpx;" >
                        <image  :class="task_index==5?'show':'hidden'" class="category_img" mode="widthFix" src="https://oa.yuxiang123.cn/assets/task/shop/biaoqian.svg" @click=""></image>
                    </view>
                </view>
            </view>
        </view>
        <view class="taskList" v-for="(item,index) in list" :key="index">
            <view style="width: 22%;z-index: 100;display: flex;justify-content: center;align-items: center;">
                <img :src="item.img"  style="width: 100rpx;height: 100rpx; border-radius: 20rpx;" v-if="task_index == 5">
                <img :src="item.imgs"  style="width: 100rpx;height: 100rpx; border-radius: 20rpx;" v-else>

            </view>
            <view style="width: 58%;z-index: 100;">
                <view class="taskTitle">
                    {{item.title}}
                </view>
                <view class="taskContent">
                    {{item.content}}
                </view>
            </view >
            <view style="width:20%;z-index: 100;">
                <img src="https://oa.yuxiang123.cn/assets/task/shop/shanchu.svg" alt="" style="width: 45rpx;
                height: 45rpx;
                position: absolute;
                right: 20rpx;" @click="del(item.id,index)" v-if="task_index == 5">
                 <view class="getTask" @click="toPages('/merchant/issue/add?drafts_id='+item.id)" v-if="task_index == 5" >编辑</view>
                <view class="getTask" @click="toPages('/merchant/issue/add?id='+item.id)" v-else-if="(item.status==-3 || item.status==0) ">编辑</view>
                <view class="getTask" @click="toPages('/merchant/shop/task_detail?id='+item.id)" v-else>查看详情</view>
            </view>
        </view>
        <view class="nodata" v-if="list.length == 0" >暂无更多数据 </view>
        <tabbar :type="1" :showissue="showissue" @closeissue="closeissue" @openissue="openissue"></tabbar>
    </view>
</template>
<script>
export default {
    data() {
        return {
            list:[],
            page:1,
            pagesize:20,
            task_index:1,
            bottom:false,
            bottom_1:false,
			userInfo:'',
            showissue:false,
        }
    },
    onLoad(p){
		this.userInfo=uni.getStorageSync('userInfo');
        this.token = uni.getStorageSync('token');
        if(p.task_index){
            this.task_index = p.task_index;
        }
        this.getTask();
    },
	onShow: async function () {

	},
    // 下拉刷新
    onPullDownRefresh() {
        let that = this;
        this.page=1;
        this.list.length=0;
        setTimeout(function () {
            that.getTask();
            uni.stopPullDownRefresh();
        }, 200);
    },
    onReachBottom() {
        this.page=++this.page;
        if(this.task_index ==5){
            this.getCgTask_1();
        }else{
            this.getTask_1();
        }
    },
    methods: {
        del(id,index){
            var that  = this;
            uni.showModal({
                title: '提示',
                content: '是否删除？删除后该草稿将消失！',
                success: function (res) {
                    if (res.confirm) {
                        //更新订单状态
                        that.$show();
                        uni.request({
                            url: 'https://oa.yuxiang123.cn/api/shop/delDrafts',
                            header: {
                                "content-type": "application/x-www-form-urlencoded"
                            },
                            method: 'POST',
                            data:{
                                token:uni.getStorageSync('token'),
                                id:id
                            },
                            success: (res) => {
                                if(res.data.code == 1){
                                    that.list[index].status = -1;
                                    that.$Toast('操作成功');
                                }else{
                                    that.$Toast('操作失败');
                                }
                            }
                        })
                    }
                }
            });
			
        },
        
        closeissue:function(){
            this.showissue=false;
        },
        openissue:function(){
            this.showissue=true;
        },
        del(id,index){
            var that  = this;
            uni.showModal({
                title: '提示',
                content: '是否删除？删除后该任务将消失！',
                success: function (res) {
                    if (res.confirm) {
                        //更新订单状态
                        that.$show();
                        uni.request({
                            url: 'https://oa.yuxiang123.cn/api/distribute_task/delTask',
                            header: {
                                "content-type": "application/x-www-form-urlencoded"
                            },
                            method: 'POST',
                            data:{
                                token:uni.getStorageSync('token'),
                                id:id,
                                status:-4,
                            },
                            success: (res) => {
                                if(res.data.code == 1){
                                    that.list[index].status = -4;
                                    that.$Toast('操作成功');
                                }else{
                                    that.$Toast('操作失败');
                                }
                            }
                        })
                    }
                }
            });
			
        },
        getUserTask(index){
            this.task_index=index;
            this.page=1;
            this.list.length=0;
            this.bottom=false;
            if(index == 5){
                this.getCgTask();
            }else{
                this.getTask();
            }
           
        },
        getCgTask(){
            if(!this.userInfo){
                return false;
            }
			var that=this;
            that.$show();
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/shop/getDraftsList',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:1,
                    pagesize:that.pagesize,
                    task_index:that.task_index
				},
				method: 'POST',
				success: (res) => {
                    that.$hide()
                    if(res.data.code == 1){
						that.list = res.data.data;
                        if(res.data.data.length==0){
                            that.bottom_1=true;
                        }else{
                            that.bottom_1=false;
                        }
                    }
				}
			})		
        },
        getCgTask_1(){
            if(!this.userInfo){
                return false;
            }
            if(this.bottom == true){
                return false;
            }
			var that=this;
            that.$show();
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/shop/getDraftsList',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:that.page,
                    pagesize:that.pagesize,
                    task_index:that.task_index
				},
				method: 'POST',
				success: (res) => {
                    that.$hide()
                    if(res.data.code == 1){
						that.list = that.list.concat(res.data.data);
                        if(res.data.data.length<that.pagesize && that.page > 1){
                            that.bottom_1=true;
                        }else{
							that.bottom_1=false;
						}
                    }
				}
			})		
        },
        getTask(){
            if(!this.userInfo){
                return false;
            }
			var that=this;
            that.$show();
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/shop/getShopList',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:1,
                    pagesize:that.pagesize,
                    task_index:that.task_index
				},
				method: 'POST',
				success: (res) => {
                    that.$hide()
                    if(res.data.code == 1){
						that.list = res.data.data;
                        if(res.data.data.length==0){
                            that.bottom_1=true;
                        }else{
                            that.bottom_1=false;
                        }
                    }
				}
			})		
        },
        getTask_1(){
            if(!this.userInfo){
                return false;
            }
            if(this.bottom == true){
                return false;
            }
			var that=this;
            that.$show();
			uni.request({
				url: 'https://oa.yuxiang123.cn/api/shop/getShopList',
				header: {
					"content-type": "application/x-www-form-urlencoded"
				},
				data:{
					token:uni.getStorageSync('token'),
                    page:that.page,
                    pagesize:that.pagesize,
                    task_index:that.task_index
				},
				method: 'POST',
				success: (res) => {
                    that.$hide()
                    if(res.data.code == 1){
						that.list = that.list.concat(res.data.data);
                        if(res.data.data.length<that.pagesize && that.page > 1){
                            that.bottom_1=true;
                        }else{
							that.bottom_1=false;
						}
                    }
				}
			})		
        },
        toPages:function(url,is_login = false){
			this.userInfo = uni.getStorageSync('userInfo');
			if(is_login && !this.userInfo){
				url='/subone/public/login';
			}
			console.log(url)
            if(url){
                uni.navigateTo({
                    url:url
                })
            }
        },
    }
}
</script>

<style lang="scss">
.delImgs{
    z-index: 1;
    width: 50rpx;
    height: 50rpx;
    position: relative;
    right: -94%;
    top: -156rpx;
}
.delImgs1{
    z-index: 1;
    width: 50rpx;
    height: 50rpx;
    position: relative;
    right: -94%;
    top: -185rpx;
}
.nodata{
    width:100%;
    height:100rpx;
    line-height: 100rpx;
    text-align: center;
    font-size: 24rpx;
    color:#999;
}
.taskList{
	width: 94%;
	//margin-left: 3%;
	display: flex;
	flex-wrap: wrap;
	height: 170rpx;
	border-bottom: 1px solid #ECF6FC;
}
.taskTitle{
	font-size: 34rpx;
	font-weight: 600;
	line-height: 60rpx;
	margin-top: 30rpx;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.taskContent{
	color: #999;
	font-size: 26rpx;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.getTask{
	background: #3662EC;
	color: #fff;
	height: 60rpx;
	line-height: 60rpx;
	width: 155rpx;
	text-align: center;
	border-radius: 30rpx;
	margin-top: 55rpx;
	font-size: 26rpx;
}






.hidden{
	display: none;
}
.show{
	display: inline-block;

}
.category_img{
	width: 46rpx;
}
.category_nav{
    //margin-top: 200px;
}
.category_nav .category{height:80rpx; display: flex;align-items: center;justify-content: space-between;overflow-x: scroll;}
.category_nav .category .category-item{ text-align: center;font-size:28upx;white-space: nowrap;margin:0 35rpx;}
.category_nav .category .category-item.active{font-weight: bold;font-weight: 600;font-size:34upx;}
.category_nav .category::-webkit-scrollbar {  
display: none;  
width: 0 !important;  
height: 0 !important;  
-webkit-appearance: none;  
background: transparent;  
}

</style>

